import * as React from 'react';
import { Popover } from 'antd';
import Hover from './hover';
import './show-cgi-item.less';

export interface SlowCgiItemProps {
    projectId: number
    url: string,
    times: number,
    avg: number,
    timesMax: number,
    avgMax: number,
    startDate: number,
    endDate: number
}

function getWidthPercent(value: number, max: number): object {
    max = max * 1.1;
    const percent = (value / max) * 100;
    return {
        width: percent + '%',
        minWidth: 'fit-content'
    };
}

export default function SlowCgiItem(props: SlowCgiItemProps) {
    const { url, times, avg, timesMax, avgMax, startDate, endDate, projectId } = props;
    return <Popover placement="top" content={<Hover projectId={projectId} url={url} startDate={startDate} endDate={endDate} />}>
        <div className="cgi-item-wrapper">
            <div>
                <span className="tip-label">URL：</span>
                <div className="url-line">
                    <p className="inline-label">{url}</p>
                </div>
            </div >
            <div className="section">
                <span className="tip-label">平均延迟：</span>
                <div className="line line__blue" style={getWidthPercent(avg, avgMax)}>
                    <p className="inline-label">{avg.toFixed(0) + ' ms'}</p>
                </div>
            </div>
            <div className="section">
                <span className="tip-label">请求次数：</span>
                <div className="line line__purple" style={getWidthPercent(times, timesMax)}>
                    <p className="inline-label">{times + ' 次'}</p>
                </div>
            </div>
        </div >
    </Popover>;
}